<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page language="java"
	import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*,java.io.OutputStream"%>
<%@page import="java.io.*"%>
<%@page import="javax.imageio.stream.ImageOutputStream"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<link rel="stylesheet" type="text/css"
	href="${ pageContext.request.contextPath }/js/css/bootstrap.css">
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/js/jquery-1.11.1.js"></script>
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/js/bootstrap.js"></script>
<style type="text/css">
.popover {
	min-width: 150px;
}

.errors {
	font-size: 12px;
	color: red;
}

label.error {
	border: none;
	color: red;
	position: absolute;
	top: 8px;
	right: 25px;
}
</style>
</head>
<body>
	<div id="zhuce" class="zhuce">
		<div class="container" style="padding-top: 50px;">
			<div class="row">
				<div class="col-xs-5  col-xs-offset-3">
					<div class="panel panel-info">
						<div class="panel-heading">
							<h4>账号注册</h4>
						</div>
						<div class="panel-body">
							<form class="form-horizontal" id="form" method="Post">
								<div class="form-group">
									<label for="userName" class="control-label col-xs-3 text-right">账号:</label>
									<div class="col-xs-8">
										<input type="text" id="userName" class="form-control"
											name="userName" data-toggle="tooltip" data-placement="top"
											title="请填写账号" />
									</div>
								</div>
								<div class="form-group">
									<label for="pwd" class="control-label col-xs-3 text-right">密码:</label>
									<div class="col-xs-8">
										<input type="password" id="pwd" class="form-control"
											name="pwd" data-toggle="tooltip" data-placement="top"
											title="请填写密码" />
									</div>
								</div>
								<div class="form-group">
									<label for="pwd2" class="control-label col-xs-3 text-right">密码确认:</label>
									<div class="col-xs-8">
										<input type="password" id="pwd2" class="form-control"
											name="pwd2" data-toggle="tooltip" data-placement="top"
											title="请填写密码" />
									</div>
								</div>
								<div class="form-group">
									<label for="yzm" class="control-label col-xs-3 text-right">验证码:</label>
									<div class="col-xs-3">
										<input type="text" id="yzm" class="form-control" name="yzm">
									</div>
									<div>
										<img alt="" src="code.jsp" alt="验证码" height="30"
											align="bottom" style="cursor: pointer;" title="看不清可单击图片刷新"
											onclick="this.src='code.jsp?d='+Math.random();"> <span>可单击图片刷新</span>
									</div>
								</div>
							</form>
							<div class="panel-footer col-sm-5 col-sm-offset-7">
								<button id="btn" type="button" class="btn btn-primary">注册</button>
								<button class="quxiao btn btn-success">取消</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/jquery.validate.min.js"></script>
	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/additional-methods.min.js"></script>
	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/messages_zh.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('[data-toggle="tooltip"]').tooltip();
			$('[data-toggle="popover"]').popover();
		})
		$("#form").validate({
			rules : {
				userName : {
					required : true,
					rangelength : [ 4, 15 ]
				},
				pwd : {
					required : true,
					rangelength : [ 4, 15 ]
				},
				pwd2 : {
					required : true,
					equalTo : '#pwd'
				}
			},
			showErrors : function(errorMap, errorList) {
				console.log(errorMap);
				console.log(errorList);
				this.defaultShowErrors();
			}
		})
		$("#btn").click(
				function() {
					$.post('${pageContext.request.contextPath}/reg.do', $(
							"#form").serialize(), function(a) {
						if (a == "codeErr") {
							location.reload();
							alert("验证码错误!");
						} else if (a == "different") {
							location.reload();
							alert("密码输入不一致");
						} else if (a == "true") {
							location.href = "/AAA/gogo";
							alert("恭喜,注册成功!");
						} else if (a == "false") {
							location.reload();
							alert("账号已存在");
						} else {
							location.reload();
							alert("账号或密码为空");
						}
					});
				});
		$(".quxiao").click(function() {
			location.href = "/AAA/gogo";
		})
		function checkprc() {
			document.getElementById('yzmtp1').src = "${ pageContext.request.contextPath }/php/yzm.php?"
					+ Math.random();
		}
	</script>

</body>
</html>